<template>
    <div id="root">

<!--        <div id="left">-->
<!--            </div>-->
          <el-row :gutter="30">
            <el-col :span="8" :offset="1">
              <div id="new_left">
                  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px"
                     class="demo-ruleForm">
                <el-form-item label="职工号" prop="username">
                    <el-input type="text" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input type="text" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input type="text" v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="系统角色" prop="role_id">
                    <el-select v-model="ruleForm.role_id" placeholder="请选择">
                        <el-option
                                v-for="item in ruleForm.roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门职位" prop="options_value">
                    <el-cascader
                            placeholder="部门/职位"
                            v-model="ruleForm.options_value"
                            :options="ruleForm.options">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">创建用户</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
              </div>

            </el-col>
            <el-col :span="14" :offset="1">
              <div id="new_right">
                   <p>系统所有用户</p>
            <el-table
                    height="410"
                    :data="tableDatas"
                    style="width: 550px">
                <el-table-column style="height: 100px"
                                 prop="username"
                                 label="职工号"
                                 width="90">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="part_name"
                        width="80"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="get_position"
                        label="职位"
                        width="120"
                >
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="联系方式"
                        width="120"
                >
                </el-table-column>
            </el-table>
            <div class="pagenation">
                <el-pagination
                        small
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="page_size"
                        @prev-click="prevfun"
                        @next-click="nextfun"
                        @current-change="currentchange"
                >
                </el-pagination>
            </div>
              </div>

<!--               <div id="right">-->
<!--        -->
<!--        </div>-->
            </el-col>
          </el-row>




    </div>
</template>

<script>
    export default {
        name: "CreateUserView",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            //检查选择的系统角色和部门职位是否匹配
            // //部门职位：1人事普通、2人事经理、3行政普通、4行政经理、5财务普通、6财务经理、7开发普通、8开发经理、9老板、10系统管理
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('职工号不能为空'));
                } else {
                    callback();
                }

            };
            var checkName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('姓名不能为空'))
                } else {
                    callback();
                }
            };
            var checkEmail = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('邮箱不能为空'))
                } else {
                    callback();
                }
            };
            return {
                //分页
                // 总条数


                //用来接收后端传递过来的用户信息
                tableDatas: [],
                //需要展示的数据的总数
                total: 5, //先设置给初始值，只给空字符串''会报typeerror
                page_size: 1,//先设置给初始值，只给空字符串''会报typeerror
                //下面的是用户信息
                ruleForm: {
                    username: '',
                    pass: '',
                    checkPass: '',
                    name: '',
                    email: '',
                    roles: '',//从后端拿到系统角色，给用户选择
                    role_id: '', //用户选择的角色的id
                    options: [],//[{part:{},position:[]},{},{}]//展示给用户选择级联选项
                    options_value: [] //级联选项中被选择的一级和二级的id会保存进来
                },
                manager_id:[],
                staff_id:[],
                boss_id:[],
                rules: {
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    username: [
                        {validator: checkUsername, trigger: 'blur'}
                    ],
                    name: [
                        {validator: checkName, trigger: 'blur'}
                    ],
                    email: [
                        {validator: checkEmail, trigger: 'blur'}
                    ],
                    options_value: [
                        {required: true, message: '请选择部门/职位', trigger: 'change'}
                    ],
                    role_id: [
                        {required: true, message: '请选择系统角色', trigger: 'change'}
                    ],
                }
            }
        },
        methods: {
             //从后端获取到用户的数据的函数，封装陈一个函数跨域给其他的函数使用
            get_data(page = 1) {
                this.$axios({
                    method: 'get',
                    url: this.$settings.base_url + '/user/showuser/?page=' + page
                }).then(res => {
                    //获取到用户信息，赋值给变量
                    this.tableDatas = res.data.results
                    // this.prev = res.data.links.previous
                    // this.next = res.data.links.next
                    this.total = res.data.count
                    this.page_size = res.data.page_size
                }).catch(error => {
                    console.log(error)
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submitForm(formName) {
                //获取当前token
                const token = sessionStorage.getItem('oatoken')
                const datas = {
                    username: this.ruleForm.username,
                    password: this.ruleForm.pass,
                    checkpassword: this.ruleForm.checkPass,
                    name: this.ruleForm.name,
                    email: this.ruleForm.email,
                    role: this.ruleForm.role_id,
                    part_f: this.ruleForm.options_value[0],
                    position: this.ruleForm.options_value[1]
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //role=(1,'超级管理员'),(2,'管理员'),(3,'经理'),(4,'普通员工')
                        //(1,'行政部'),(2,'人事部'),(3,'开发部'),(4,'财务部'),(5,'老板部')
                        //部门职位：1人事普通、2人事经理、3行政普通、4行政经理、5财务普通、6财务经理、7开发普通、8开发经理、9老板、10系统管理
                        var arr = [1, 2];
                        var manager_arr = this.manager_id;//经理职业的id
                        var staff_arr = this.staff_id;//员工职业的id
                        var boss_arr = this.boss_id//老板职业的id
                        //role=(1,'超级管理员'),(2,'管理员'),(3,'经理'),(4,'普通员工')
                        //(1,'行政部'),(2,'人事部'),(3,'开发部'),(4,'财务部'),(5,'老板部')
                        //部门职位：1人事普通、2人事经理、3行政普通、4行政经理、5财务普通、6财务经理、7开发普通、8开发经理、9老板、10系统管理
                        if (arr.indexOf(this.ruleForm.role_id) !== -1) {
                            if (!(boss_arr.indexOf(this.ruleForm.options_value[1]) !== -1)) {
                                this.$message.error("系统角色是管理员，所属部门必须是老板部")
                                return;
                            }
                        } else if (this.ruleForm.role_id === 3) {

                            if (!(manager_arr.indexOf(this.ruleForm.options_value[1]) !== -1)) {
                                this.$message.error("系统角色是部门经理，职位必须是经理")
                                return;
                            }
                        } else if (this.ruleForm.role_id === 4) {

                            if (!(staff_arr.indexOf(this.ruleForm.options_value[1]) !== -1)) {
                                this.$message.error('系统角色是普通员工，职位必须是普通员工')
                                return;
                            }
                        }
                        this.$axios({
                            url: this.$settings.base_url + '/user/createuser/',
                            method: 'post',
                            data: datas,
                            headers: {AUTHORIZATION: token}
                        }).then(res => {
                            if (res.data.code === 100) {
                                this.$message.success('创建用户成功')
                                //创建用户成功，将页面上的数据清空
                                this.resetForm('ruleForm')
                                //重新获取要展示用户信息
                                this.get_data()
                            } else {
                                if (res.data.error.username) {
                                    this.$message.error(res.data.error.username);
                                } else if(res.data.error.non_field_errors[0]){
                                    this.$message.error(res.data.error.non_field_errors[0]);
                                } else {
                                   this.$message.error('创建用户失败');
                                }
                            }
                        }).catch(error => {
                            console.log(error)
                            this.$message.error('请求失败！！')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            prevfun(value) {
                //value拿到的当前的页码
                this.get_data(value)
            },
            nextfun(value) {
                //value拿到页码
                this.get_data(value)
            },
            currentchange(value) {
                this.get_data(value)

            },
            //


        },//函数结束
        //生命周期函数monuted
        mounted() {   //挂载的时候，发送get请求获取需要的数据
            //获取创建用户需要的系统角色和部门职位
            this.$axios({
                method: "get",
                url: this.$settings.base_url + '/user/userchoice/',
                headers: {
                    'AUTHORIZATION': sessionStorage.getItem('oatoken')
                }
            }).then(res => {
                this.ruleForm.roles = res.data.data.role //拿到系统角色
                this.ruleForm.options = res.data.data.part_position //拿到部门和部门内的职位
                this.staff_id = res.data.data.staff_id //拿到普通员工对应的职位
                this.manager_id = res.data.data.manager_id //拿到经理对应的职位
                this.boss_id = res.data.data.boss_id //拿到管理员对应的职位
            }).catch(error => {
                console.log(error)
            });
            //获取用户信息的请求
            this.get_data()
        }
    }
</script>

<style scoped>
    #left {
        width: 400px;
        height: 540px;
        /*border: 1px solid skyblue;*/
        margin-left: 20px;
        margin-top: 10px;
        display: inline-block;
        text-align: left;
        border: 1px solid #a09595;
        border-radius: 10px;

    }

    /*左侧重输入框*/
    #left>.demo-ruleForm {
        margin-top: 10px;
        margin-right: 10px;

    }

    /*上面是左侧的样式*/
    /*下面是右侧的样式*/

    #right {
        /*background-color: #333333;*/
        color: #070409;
        display: inline-block;
        height: 540px;
        width: 550px;
        border: 1px solid #a09595;
        margin-right: 20px;
        margin-top: 10px;
        float: right;
        border-radius: 10px;
    }

    #right > p {
        font-size: 18px;
        text-align: center;
    }

    #right > .pagenation {
        text-align: center;

    }

    #right > .el-table {
        height: 420px;
        width: 550px;
    }

    /*上面是右侧样式*/
    /*下面是整个root标签的样式*/

    /*整个大标签*/
    #root {
        height: 590px;
        background-color: white;
        box-shadow: 0 0 25px #333333;
        text-align: left;
    }
  #new_right{
    margin-top: 30px;
    text-align: center;
  }
  #new_left{
    margin-top: 30px;
  }
</style>
